<template>
  <div>
    <el-table
      ref="singleTable"
      :data="cutObj.records"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      style="
        width: 600px;
        height: 200px;
        border: 1px solid #dcdfe6;
        margin: 100px;
      "
    >
      <el-table-column property="moveId" width="50"> </el-table-column>
      <el-table-column property="moveDay" label="日期" width="200">
      </el-table-column>
      <el-table-column property="moveClass" label="领用小班" width="180">
      </el-table-column>
      <el-table-column
        property="moveUser"
        label="出库人"
        width="165"
      ></el-table-column>
    </el-table>

    <div class="check">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="cutObj.pages * 10"
          @current-change="handleChange"
          @click="get()"
          style="margin-left: 100px; margin-bottom: 60px"
        >
        </el-pagination>

        <div style="margin: 20px">
          <el-button @click="addmove(moveId)" style="margin-left: 100px"
            >添加出库信息</el-button
          >
          <el-button @click="getById(moveId)">查看出库信息</el-button>
        </div>
      </div>
      <div>
        <div>
          <fieldset style="width: 300px">
            <legend>查询出库信息</legend>
            <form action="">
              起始日期：
              <input type="date" v-model="startDate" style="margin: 20px" />
              <br />
              结束日期：
              <input type="date" v-model="endDate" style="margin: 20px" />
              <br />
              领用小班：
              <input type="text" v-model="moveClass" style="margin: 20px" />
              <br />
              <el-button @click="get()" style="margin-left: 130px"
                >查询</el-button
              >
            </form>
          </fieldset>
        </div>
      </div>
    </div>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">查看出库信息</h1>
      <div class="msg" style="display: flex">
        <div style="width: 100%">
          <span style="margin: 80px 30px"
            >领用小班：{{ moveList.moveClass }}</span
          >
          <span style="margin: 80px 30px"
            >出库人： {{ moveList.moveUser }}</span
          >
          <span style="margin: 80px 30px"
            >出库日期：{{ moveList.moveDay }}</span
          >

          <div>
            <el-table
              ref="singleTable"
              :data="agentiaBeanList"
              highlight-current-row
              height="200"
              @current-change="handleCurrentChange"
              @row-click="handleTableRow"
              style="
                width: 600px;
                height: 195px;
                border: 1px solid #dcdfe6;
                margin-top: 100px;
              "
            >
              <el-table-column property="agentiaId" width="50">
              </el-table-column>
              <el-table-column property="agentiaName" label="名称" width="80">
              </el-table-column>
              <el-table-column
                property="agentiaType"
                label="防治类型"
                width="120"
              >
              </el-table-column>
              <el-table-column
                property="agentiaCategory"
                label="类别"
                width="120"
              >
              </el-table-column>
              <el-table-column
                property="detailsBean.detailsNum"
                label="领取数量"
                width="160"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogVisible = false"
          style="margin-right: 240px; margin-bottom: 50px"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title=""
      :visible.sync="dialog"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">添加出库信息</h1>
      <div class="msg" style="">
        <div style="width: 600px">
          <span style="margin: 50px 30px">
            领用小班&nbsp;

            <el-select v-model="outClass" placeholder="请选择">
              <el-option
                v-for="item in this.ClassList"
                :key="item.className"
                :label="item.className"
                :value="item.className"
              >
              </el-option>
            </el-select>
          </span>
          <span style="margin-left: 120px">
            出库人：{{ this.loginUser.userName }}
          </span>
        </div>

        <div style="width: 100%">
          <el-table
            ref="singleTable"
            :data="agentiaBeanList"
            height="200"
            highlight-current-row
            @current-change="handleCurrentChange"
            @row-click="handleTableRow1"
            style="
              width: 600px;
              height: 195px;
              border: 1px solid #dcdfe6;
              margin-top: 80px;
            "
          >
            <el-table-column property="agentiaId" width="50"> </el-table-column>
            <el-table-column property="agentiaName" label="名称" width="120">
            </el-table-column>

            <el-table-column property="agentiaCategory" label="类别" width="80">
            </el-table-column>

            <el-table-column
              property="agentiaType"
              label="防治类型"
              width="130"
            >
            </el-table-column>

            <el-table-column prop="detailsNum" label="领用数量"
              >onSelectAll
              <template slot-scope="scope" >
                <el-input
                  v-model="detailsNum"
                  :value="scope.row.detailsBean.detailsNum"
                  @blur="upNum()"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <span>
        <el-button @click="add()" style="margin: 60px">添加物品</el-button>
        <el-button type="primary" @click="del(agentiaId)">移除物品</el-button>
        <el-button type="primary" @click="addmo()" style="margin: 60px"
          >出 库</el-button
        >
      </span>
    </el-dialog>

    <div>
      <el-dialog
        title=""
        :visible.sync="dia"
        width="610px"
        :before-close="handleClose"
      >
        <h1 style="text-align: center">添加物品</h1>
        <div>
          <div style="width: 100%">
            <div>
              <el-table
                ref="singleTable"
                :data="agtObj.records"
                highlight-current-row
                @select="onSelect"
                @select-all="onSelectAll"
                @current-change="handleCurrentChange"
                @row-click="handleTableRow2"
                style="
                  width: 600px;
                  height: 238px;
                  border: 1px solid #dcdfe6;
                  margin-top: 100px;
                "
              >
                <el-table-column type="selection" width="30"> </el-table-column>
                <el-table-column property="agentiaId" width="50">
                </el-table-column>
                <el-table-column
                  property="agentiaName"
                  label="物品名称"
                  width="80"
                >
                </el-table-column>

                <el-table-column
                  property="agentiaCategory"
                  label="类别"
                  width="120"
                >
                </el-table-column>

                <el-table-column
                  property="agentiaType"
                  label="防治类型"
                  width="120"
                >
                </el-table-column>

                <el-table-column
                  property="agentiaUse"
                  label="主要用途"
                  width="160"
                >
                </el-table-column>
              </el-table>

              <el-pagination
                layout="prev, pager, next"
                :total="agenObj.pages * 10"
                @current-change="handle"
                style="margin-left: 100px; margin-bottom: 50px"
                @click="shop()"
              >
              </el-pagination>
            </div>
          </div>
        </div>

        <p>
          物品名称：
          <input type="text" v-model="agentiaName" />

          <span>
            <span style="margin-left: 100px"> 类型：</span>

            <select v-model="agentiaCategory" style="margin-left: 20px">
              <option></option>
              <option>药剂</option>
              <option>器械</option>
            </select>
          </span>
        </p>

        <p style="margin-top: 30px">
          防治类型：
          <select v-model="agentiaType" style="margin-left: 20px">
            <option></option>
            <option>虫害</option>
            <option>病害</option>
          </select>
        </p>

        <p style="margin-top: 60px">
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              @click="shop()"
              style="margin-left: 160px; margin-bottom: 50px"
            >
              查 询
            </el-button>

            <el-button
              type="primary"
              @click="getSelIds()"
              style="margin-left: 160px; margin-bottom: 50px"
            >
              领 取
            </el-button>
          </span>
        </p>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      pageNo: "",
      pageNo1: "",
      pages: "",
      moveId: "",
      startDate: "",
      endDate: "",
      moveDay: "",
      moveClass: "",
      moveUser: "",
      agentiaBeanList: [],
      detailsBean: [],
      detailsId: "",
      detailsNum: "",
      agentiaId: "",
      agentiaName: "",
      agentiaType: "",
      agentiaCategory: "",
      agentiaUse: "",
      medicineBeanList: "",
      moveUser:"",
      agenObj: "",
      newNum:"",
      moveList: [],
      ClassList: [],
      outClass: "",
      selections: {}, // 保存已选择过的row
      ataArray: {},
      dialogVisible: false,
      dialog: false,
      dia: false,
    };
  },
  computed: {
    ...mapState("mov", ["cutObj", "param1"]),
    ...mapState("shop", ["agtObj", "param"]),
    ...mapState("login", ["loginUser"]),
  },
  mounted() {
    this.getData();
  },
  methods: {
    ...mapMutations("mov", ["setParam1"]),
    ...mapActions("mov", ["findByItem"]),
    ...mapActions("shop", ["findCut"]),
    ...mapMutations("shop", ["setParam"]),


    handleChange(index) {
      console.log(`当前页-----: ${index}`);
      this.pageNo = index;
      console.log("页码--------" + this.pageNo);
      this.cut(this.pageNo);
    },
    handle(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut1(this.pageNo);
    },
    get() {
      let paramObj1 = this.param1;
      paramObj1.startDate = this.startDate;
      paramObj1.endDate = this.endDate;
      paramObj1.moveClass = this.moveClass;
      // 把最新的信息装入 store中的 param对象中
      this.setParam1(paramObj1);
      this.findByItem();
    },
    cut(){
      console.log(this.pageNo)
      let paramObj1 = this.param;
      paramObj1.pageNo = this.pageNo;
      console.log(paramObj1)
      this.setParam1(paramObj1);
      this.findByItem();
    },
    cut1(pageNo) {
      let paramObj = this.param;
      paramObj.pageNo = pageNo;
      this.setParam(paramObj);
      this.findCut();
    },
    async getById(moveId) {
      let paramobj = { moveId: moveId };

      let moveObj = await this.ajax.getSubmit(
        "/api/move/findMoveById",
        paramobj
      );

      console.log(moveObj);

      this.moveList = moveObj;

      this.agentiaBeanList = this.moveList.agentiaBeanList;

      console.log(this.agentiaBeanList);

      this.dialogVisible = true;
    },

    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleTableRow(row) {
      console.log(row.moveId);

      this.moveId = row.moveId;
    },
    handleTableRow1(row) {
      console.log(row.agentiaId);

      this.agentiaId = row.agentiaId;
    },
    handleTableRow2(row) {
      console.log(row.agentiaId);

      this.agentiaId = row.agentiaId;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })

        .catch((_) => {});
    },
    async addmove(moveId) {
      this.dialog = true;

      let paramobj = { moveId: moveId };

      let moveObj = await this.ajax.getSubmit(
        "/api/move/findMoveById",
        paramobj
      );

      console.log(moveObj);

      this.moveList = moveObj;

      this.agentiaBeanList = this.moveList.agentiaBeanList;

      console.log(this.agentiaBeanList);
    },
    async add(pageNo) {
      this.dia = true;

      let moveObj = {
        pageNo: pageNo,
        pages: 3,
        agentiaName: "",
        agentiaType: "",
        agentiaCategory: "",
      };

      let Obj = await this.ajax.getSubmit("/api/agt/findCutAgentia", moveObj);

      this.agenObj = Obj;
    },
    // 勾选时候，记录[{id: row}, ...]
    onSelect(selection, row) {
      if (this.selections[row.agentiaId]) {
        delete this.selections[row.agentiaId];
      } else {
        this.selections[row.agentiaId] = row;
      }

      console.log(row);
    },

    // 全选情况
    onSelectAll(selection) {
      // 全选
      if (selection.length) {
        selection.forEach((row) => {
          this.selections[row.agentiaId] = row;
        });
      } else {
        // 取消全选
        this.list.forEach((row) => {
          delete this.selections[row.agentiaId];
        });
      }
    },
    // 获取数据列表
    getData() {
      // ...
    },

    //获取选中的行的id值
    async getSelIds() {
      let selections = Object.keys(this.selections);
      //由于Object.keys之后是字符串类型， 如果传递给后台的id是数字类型,需要转换过来。
      let ids = selections.map((item) => Number(item));
      console.log(ids);
      //如果是个别情况，获取之后需要清除选中状态的话，需要初始化一下
      // this.selections = {};
      // this.$refs.multipleTable.clearSelection();

      this.ataArray = ids;
      this.detailsNum = 1;
      let disobj = {
        moveId: this.moveId,
        ataArray: JSON.stringify(this.ataArray),
        detailsNum: this.detailsNum,
      };

      console.log(
        this.moveId + "----" + this.ataArray + "-----" + this.detailsNum
      );
      console.log(disobj);

      let Obj = await this.ajax.postSubmit("/api/move/addAgentia", disobj);

      if (Obj != null) {
        alert("添加成功");
      }

      this.dia = false
      this.addmove(this.moveId)
    },
    async del(agentiaId, moveId) {
      console.log(agentiaId + "" + moveId);

      let agobj = { agentiaId: agentiaId, moveId: this.moveId };

      let Obj = await this.ajax.getSubmit("/api/move/delAgentia", agobj);

      alert("删除物品成功");

      this.addmove(this.moveId)
    },
    shop(pageNo) {
      console.log(pageNo);
      let paramObj = this.param;
      paramObj.pageNo = pageNo;
      paramObj.agentiaName = this.agentiaName;
      paramObj.agentiaType = this.agentiaType;
      paramObj.agentiaCategory = this.agentiaCategory;
      // 把最新的信息装入 store中的 param对象中
      this.setParam(paramObj);
      this.findCut();
    },
    async upNum() {

      console.log( '======'+ this.detailsNum + '==' + this.moveId)
      console.log(this.detailsNum)
      let upNumObj = { moveId:this.moveId, agentiaId: this.agentiaId, detailsNum:this.detailsNum };

      let Obj = await this.ajax.getSubmit("/api/move/updateNum", upNumObj);

      console.log(Obj);
    },
    async showClassName() {
      this.ClassList = await this.ajax.getSubmit("/api/cls/findAllCls");
    },
    async addmo() {

      this.moveUser = this.loginUser.userName

      console.log(this.loginUser.userName)

      let parmaObj = {

        moveClass: this.outClass,
        moveUser: this.moveUser,
        
      };
      let info = await this.ajax.getSubmit("/api/move/addMove", parmaObj);

      console.log(info);
      if (info != null) {
        alert("添加成功！");
      } else {
        alert("不能为空！");
      }
      this.dialogVisible = false;
    },
  },
  created() {
    this.showClassName();
    this.findByItem();
    this.findCut();
  },
};
</script>

<style>
.check {
  display: flex;
}
.check > div:first-child {
  width: 450px;
  height: 200px;
}

.check > div:nth-child(2) {
  width: 300px;
  height: 200px;
}
</style>